window.addEventListener('load', function () {
    var img = document.querySelector('.preview_wrap');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1.当鼠标经过 img 就显示和隐藏 mask 和big
    img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    // 2.鼠标移动的时候，让黄色的盒子跟着鼠标来走
    img.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x,y);
        var maskX = x - mask.offsetHeight / 2;
        var maskY = y - mask.offsetWidth / 2;
        //如果x坐标小于0 就让他停在0的位置
        var maskW = img.offsetWidth - mask.offsetWidth;
        var maskH = img.offsetHeight - mask.offsetHeight;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskW) {
            maskX = maskW;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskH) {
            maskY = maskH;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 大图片的移动距离 = 遮盖层移动距离 * 大图片最大的移动距离 /遮盖层的最大移动距离
        //大图
        var bigImg = document.querySelector('.bigImg');
        //大图片最大的移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        //大图片的移动距离 xy
        var bigX = maskX * bigMax / maskW;
        var bigY = maskY * bigMax / maskH;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    });

});
